<template>
	<view class="complate-list">
		<view class="empty-wrapper flex flex-column align-center" v-if="!list.length">
			<view class="empty-icon"></view>
			<text class="desc">暂无数据</text>
			<router-link to="/pages/market/market" navType="pushTab" class="turn-other">去看看</router-link>
		</view>
		<view class="complate-list" v-else>
			<view class="complate-item" v-for="(item,index) in list" :key="item.id"
				@tap="$emit('toComplateDetail',item)">
				<view class="flex justify-between complate-item-content">
					<view class="left-wrapper flex flex-column justify-between">
						<view class="flex align-center">
							<text class="name mr-40">{{item.ptitle}}</text>
							<text class="right-text mr-20"
								:style="{color:item.ostyle==0?getUpColor:getDownColor}"
								>{{item.ostyle==0?'买入':'卖出'}} </text>
							<text class="right-text"
								:style="{color:item.ostyle==0?getUpColor:getDownColor}"
								>{{item.onumber}}手</text>
						</view>

						<view class="price flex align-center">
							<text class="order-price mr-40">{{item.buyprice}}</text>
							<text class="close-price"> → {{item.sellprice}}</text>
						</view>
					</view>
					<view class="right-wrapper flex flex-column justify-between">
						<view class="time">{{item.selltime|time}}</view>
						<view class="ying-kui" :style="{color:parseFloat(item.ploss)>0?getUpColor:getDownColor}">{{item.ploss}}
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	export default {
		props: {
			list: {
				type: Array,
				required: true
			}
		},
		computed:{
			...mapGetters("user",["getToken","getDownColor","getUpColor"]),
		}
	}
</script>

<style lang="scss" scoped>
	.complate-list {
		.desc {
			margin-top: 18rpx;
			font-weight: 500;
			color: #333333;
		}

		.turn-other {
			margin-top: 20rpx;
			width: 188rpx;
			height: 72rpx;
			background: #3D7FFF;
			border-radius: 36rpx;
			font-size: 28rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
		}

		.complate-list {
			.complate-item {
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F0F8FF;

				.complate-item-content {
					min-height: 50rpx;
				}

				.right-text {
					font-size: 24rpx;
				}

				.left-wrapper {
					.name {
						font-size: 28rpx;
						width: 100rpx;
					}

					.order-price {
						width: 100rpx;
						font-size: 24rpx;
						font-weight: bold;
					}

					.close-price {
						font-size: 24rpx;
						font-weight: bold;
					}

					.now-price {
						font-size: 24rpx;
						font-weight: bold;
					}

					.label {
						font-size: 20rpx;
						color: #999;
					}

					.value {
						font-size: 20rpx;
						color: #999;
					}

				}

				.right-wrapper {

					.ying-kui {
						font-size: 28rpx;
						text-align: right;
						font-weight: bold;
					}

					.time {
						font-size: 20rpx;
						color: #999;
						text-align: right;
					}
				}

				.mr-20 {
					margin-right: 20rpx;
				}

				.mr-40 {
					margin-right: 80rpx;
				}

				.mr-10 {
					margin-right: 10rpx;
				}

				.bottom-btn {
					flex: 1;
					background-color: $color-blue;
					font-size: 24rpx;
					text-align: center;
					color: #fff;
					line-height: 54rpx;
					border-radius: 10rpx;
					margin: 10rpx;
				}
			}
		}
	}
</style>
